1import {useState, useMemo, PropsWithChildren} from 'react';
 2import EventLayout, {TabComponent} from '../../../layouts/Event';
 3import {EventByUuidDocument} from '../../../generated/graphql';
 4import useProfile from '../../../hooks/useProfile';
 5import WaitingList from '../../../containers/WaitingList';
 6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
 7import pageUtils from '../../../lib/pageUtils';
 8
 9interface NewPassengerDialogContext {
10  addSelf: boolean;
11}
12
13interface Props {
14  eventUUID: string;
15}
16
17const Page = (props: PropsWithChildren<Props>) => {
18  return <EventLayout {...props} Tab={WaitingListTab} />;
19};
20
21const WaitingListTab: TabComponent = ({event}) => {
22  const {userId} = useProfile();
23  const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
24    useState<NewPassengerDialogContext | null>(null);
25
26  const canAddSelf = useMemo(() => {
27    if (!userId) return false;
28    const isInWaitingList = event?.waitingPassengers?.data?.some(
29      passenger => passenger.attributes.user?.data?.id === `${userId}`
30    );
31    const isInTravel = event?.travels?.data?.some(travel =>
32      travel.attributes.passengers?.data?.some(
33        passenger => passenger.attributes.user?.data?.id === `${userId}`
34      )
35    );
36    return !(isInWaitingList || isInTravel);
37  }, [event, userId]);
38
39  return (
40    <>
41      <WaitingList
42        canAddSelf={canAddSelf}
43        getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
44          toggleNewPassengerToWaitingList({addSelf})}
45      />
46      {!!addPassengerToWaitingListContext && (
47        <AddPassengerToWaitingList
48          open={!!addPassengerToWaitingListContext}
49          toggle={() => toggleNewPassengerToWaitingList(null)}
50          addSelf={addPassengerToWaitingListContext.addSelf}
51        />
52      )}
53    </>
54  );
55};
56
57export const getServerSideProps = pageUtils.getServerSideProps(
58  async (context, apolloClient) => {
59    const {uuid} = context.query;
60    const {host = ''} = context.req.headers;
61
62    // Fetch event
63    const {data} = await apolloClient.query({
64      query: EventByUuidDocument,
65      variables: {uuid},
66    });
67    const event = data?.eventByUUID?.data;
68
69    return {
70      eventUUID: uuid,
71      metas: {
72        title: event?.attributes?.name || '',
73        url: `https://${host}${context.resolvedUrl}`,
74      },
75    };
76  }
77);
78
79export default Page;